
<script setup>
import {ref} from 'vue'

const listItems=ref([
				{
					icon: '/static/assets/my/打卡.png',
					title: '打卡信息',
					path:'/pages/clock/clock'  //跳转打卡日历地址
				},
				{
					icon: '/static/assets/my/请假.png',
					title: '请假信息',
					path:'/pages/vacation/vacation'//跳转请假地址
				},
				{
					icon: '/static/assets/my/工资条.png',
					title: '工资发放',
					path:'/pages/wages/wages'//跳转工资发放记录地址
				},
				{
					icon: '/static/assets/my/密码.png',
					title: '修改密码',
					path:'/pages/password/password'//跳转账号管理地址
				}
			]);
				
// 跳转到打卡日历信息页面
			const NavigatorclockInfoChange=(item)=>{
				uni.navigateTo({
				  url: item.path, 
				  success: () => {
				    console.log('成功跳转到打卡日历');
				  },
				  fail: (err) => {
				    console.error('跳转失败', err);
				  }
				});
			}
</script>

<template>
	<view class="service-content">
	<text class="service-content__title">我的服务</text>
	
	<!-- 我的服务区域 -->
     <view class="service-content__list">
	<uni-list class="service-content__list">
	   <uni-list-item 
	           v-for="(item, index) in listItems" 
	           :key="index"
	           :title="item.title" 
	           :thumb="item.icon" 
	           thumb-size="medium" 
	           link 
	           to="/pages/index/index" 
			   @click="NavigatorclockInfoChange(item)"
	         >
	         </uni-list-item>
	</uni-list>
</view>


	
	</view>
</template>

<style lang="scss"> 
.service-content{
	background-color:$uni-bg-color;
    padding: 10rpx 0rpx 10rpx 10rpx;
    border-radius: 20rpx;
	.service-content__title{
				margin: 50rpx 0rpx 5rpx 20rpx;
				font-weight: 600;
				font-size: $uni-font-size-lg;
			}
     .service-content__list {
	    margin-top: 30rpx;
	}
}

</style>